<template>
  <div class="statistical-dashboard">
    <a-card class="table-card">
      <div class="customer-details">
        <h2 style="text-align: center;">越减越便宜客户参与记录明细表</h2>
        <GzSearchForm :searchFunc="searchFuncCustomer" searchConditionNum="6">
          <a-form-item class="table-search-item" label="领用人手机号">
            <a-input v-model:value="customerData['phone']" :placeholder="'领用人手机号'" />
          </a-form-item>
          <a-form-item class="table-search-item" label="领用开始时间">
            <a-date-picker v-model:value="customerData['startTime']" :placeholder="'领用开始时间'" style="width: 100%;" />
          </a-form-item>
          <a-form-item class="table-search-item" label="领用结束时间">
            <a-date-picker v-model:value="customerData['endTime']" :placeholder="'领用结束时间'" style="width: 100%;" />
          </a-form-item>
          <a-form-item class="table-search-item" label="客户ID">
            <a-input v-model:value="customerData['customerId']" :placeholder="'客户ID'" />
          </a-form-item>
          <template #footer>
            <a-button type="primary" :loading="exportLoading" class="ref-left-10" @click="onExportCustomer">
              <export-outlined />导出
            </a-button>
          </template>
        </GzSearchForm>
        
        <!-- 列表渲染 -->
        <GzTable
          ref="infoTableRefCustomer"
          :init-data="true"
          :req-table-data-func="reqTableDataFuncCustomer"
          :table-columns="tableColumnsCustomer"
          :search-data="customerData"
          :pageSize="10"
        />
      </div>
      <!-- 越减越便宜机构明细表 -->
      <div class="proxy-details">
        <h2 style="text-align: center;">越减越便宜机构明细表</h2>
        <GzSearchForm :searchFunc="searchFuncProxy" searchConditionNum="6">
          <a-form-item class="table-search-item" label="领用人手机号">
            <a-input v-model:value="proxyData['phone']" :placeholder="'领用人手机号'" />
          </a-form-item>
          <a-form-item class="table-search-item" label="领用开始时间">
            <a-date-picker v-model:value="proxyData['startTime']" :placeholder="'领用开始时间'" style="width: 100%;" />
          </a-form-item>
          <a-form-item class="table-search-item" label="领用结束时间">
            <a-date-picker v-model:value="proxyData['endTime']" :placeholder="'领用结束时间'" style="width: 100%;" />
          </a-form-item>
          <a-form-item class="table-search-item" label="客户ID">
            <a-input v-model:value="proxyData['customerId']" :placeholder="'客户ID'" />
          </a-form-item>
          <template #footer>
            <a-button type="primary" :loading="exportProxyDataLoading" class="ref-left-10">
              <export-outlined />导出
            </a-button>
          </template>
        </GzSearchForm>
        
        <!-- 列表渲染 -->
        <GzTable
          ref="infoTableRefProxy"
          :init-data="true"
          :req-table-data-func="reqTableDataFuncProxy"
          :table-columns="tableColumnsProxy"
          :search-data="proxyData"
          :pageSize="10"
        />
      </div>
      <a-affix :offset-bottom="20">
        <div style="background-color: white;">
          <a-divider style="margin: 0; margin-top: 20px;" />
          <div class="bottom-buttons">
            <div class="bottom-buttons-item" @click="emits('switchApplyPage', { page: 'list' })">
              <a-button type="link" style="color: #808080 ;"><left-outlined />返回列表页</a-button>
            </div>
          </div>
        </div>
      </a-affix>
    </a-card>
  </div>
</template>
<script lang="ts" setup>
import { ref, reactive, onMounted,getCurrentInstance } from 'vue'
import { $getCustomerData,$exportCustomerData } from '@/api/activityManage/activityList/index'
const { $infoBox, $access } = getCurrentInstance()!.appContext.config.globalProperties

const infoTableRefCustomer = ref()
const emits = defineEmits(['switchApplyPage'])
// 数据源
const exportLoading : any = ref(false ) // 导出按钮loading
const customerData = reactive({
    phone: '', // 手机号
    startTime: null, // 领用开始时间
    endTime: null ,// 领用结束时间
    customerId: '' // 客户ID
})

function searchFuncCustomer (){
  infoTableRefCustomer.value.refTable(true)
}

function reqTableDataFuncCustomer(){
  return new Promise((resolve, reject) => {
    // 模拟请求数据
     $getCustomerData({...customerData })
        .then((res: any) => {
                
          resolve(res)
        })
        .catch((err: any) => {
          reject(err)
        })
  })
}

const tableColumnsCustomer = reactive([
 { key: 'fansId', title: '用户ID', dataIndex: 'fansId', fixed: 'left',  width: 100 },
  { key: 'cstmName', title: '实名认证姓名', dataIndex: 'cstmName',width: 120 },
  { key: 'phone', title: '手机号', dataIndex: 'phone',width: 120 },
  { key: 'endTime', title: '领用结束时间', dataIndex: 'endTime',width: 150 },
  { key: 'firstJoinTime', title: '首次领取A券的时间', dataIndex: 'firstJoinTime',width: 200 },
  { key: 'firstWriteTime', title: '首次领取A券的核销时间', dataIndex: 'firstWriteTime',width: 200 },
  { key: 'state', title: '首次领取A券的奖品状态', dataIndex: 'state',width: 200 },
  { key: 'firstChannelCode', title: '首次领取A券的渠道码', dataIndex: 'firstChannelCode',width: 200  },
  { key: 'firstChannelName', title: '首次领取A券的渠道名称', dataIndex: 'firstChannelName',width: 200  },
  { key: 'channelAgentNo', title: '入链账号所属网点机构号', dataIndex: 'channelAgentNo',width: 200  },
  { key: 'b1SendNum', title: 'B1奖品发放数量', dataIndex: 'b1SendNum',width: 200  },
  { key: 'b2GetNum', title: ' B2奖品真实领取数量', dataIndex: 'b2GetNum',width: 200  },
  { key: 'b3GetNum', title: ' B3奖品真实领取数量', dataIndex: 'b3GetNum',width: 200  },
  { key: 'cGetNum', title: ' C奖品真实领取数量', dataIndex: 'cGetNum' ,width: 200 },
  { key: 'dGetNum', title: ' D奖品真实领取数量', dataIndex: 'dGetNum' ,width: 200 },
  { key: 'isAuth', title: ' 是否实名', dataIndex: 'isAuth' ,width: 100 },
  { key: 'takePartIsAuth', title: ' 客户参与时是否完成实名认证', dataIndex: 'takePartIsAuth',width: 220  },
])  


/**
 * 导出
 */
async function onExportCustomer() {
  try {
   exportLoading.value = true
    await $exportCustomerData({ ...customerData })
    $infoBox.message.success('导出成功，请到下载目录查看')
  } catch (error) {
  } finally {
    exportLoading.value = false
  }
}

// 代理机构数据
const infoTableRefProxy = ref()
const proxyData = reactive({
  phone: '', // 手机号
  startTime: null, // 领用开始时间
  endTime: null ,// 领用结束时间
  customerId: '' // 客户ID
})
function reqTableDataFuncProxy (){
  return new Promise((resolve, reject) => {
    // 模拟请求数据
     $getCustomerData({...proxyData })
        .then((res: any) => {
          resolve(res)
        })
        .catch((err: any) => {
          reject(err)
        })
  })
}
function searchFuncProxy (){
  infoTableRefProxy.value.refTable(true)
}
const exportProxyDataLoading = ref(false) // 导出按钮loading

</script>